.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 61;
}

.list-box {
    width: 83.3333vw;
    height: 80.37036vh;
    background: #00152B;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 0.7292vw;
    line-height: 1.0417vw;
    color: #fff;
    z-index: 62;

    .options-container {
        height: 6.29vh;
        padding: 0 0.8333vw;
        display: flex;
        align-items: center;
        position: relative;

        .option-box {
            display: flex;
            align-items: center;

            .option-name {
                font-size: 0.7292vw;
                color: #fff;
                padding-right: 0.4167vw;
            }

            .select-box {
                position: relative;
                margin-right: 1.875vw;
                cursor: pointer;

                .selected-box {
                    width: 12.5vw;
                    line-height: 1.6667vw;
                    padding: 0 0.6771vw;
                    background: linear-gradient(180deg, rgba(43, 142, 243, 0) 0%, rgba(43, 142, 243, 0.2) 100%);
                    border: 1px solid rgba(29, 122, 217, 0.5);
                    box-sizing: border-box;
                    color: rgba(255, 255, 255, .3);
                    position: relative;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-wrap: nowrap;
                }

                .selected-box::after {
                    content: '';
                    display: block;
                    width: 0;
                    height: 10px;
                    border-top: 5px solid #fff;
                    border-bottom: 5px solid transparent;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    position: absolute;
                    top: 50%;
                    right: 0.5208vw;
                }

                .select-options {
                    position: absolute;
                    top: calc(100% + 10px);
                    left: -1px;
                    width: 12.5vw;
                    height: 20vh;
                    background: #00152B;
                    border: 1px solid rgba(29, 122, 217, 0.4);
                    padding: 0.625vw 0;
                    box-sizing: border-box;

                    view {
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        text-wrap: nowrap;
                        padding: 0 1.0417vw;
                        box-sizing: border-box;
                        line-height: 1.6667vw;
                        text-align: center;
                    }

                    .selected {
                        color: #0089CF;
                        background-color: rgba(0, 137, 207, .2);
                    }
                }
            }

            input {
                width: 12.5vw;
                height: 1.6667vw;
                background: linear-gradient(180deg, rgba(43, 142, 243, 0) 0%, rgba(43, 142, 243, 0.2) 100%);
                border: 1px solid rgba(29, 122, 217, 0.5);
                box-sizing: border-box;
                margin-right: 1.875vw;
                font-size: 0.625vw;
                padding-left: 0.6771vw;
            }

            .pick-time {

                // background-color: rgba(0, 137, 207, .2);
                // border: 1px solid rgba(29, 122, 217, 0.4);
                .el-picker-panel.el-date-picker.el-popper {
                    background: #00152B !important;
                    border: 1px solid rgba(29, 122, 217, 0.4) !important;
                }

                .el-picker-panel {
                    background: #00152B !important;
                    border: 1px solid rgba(29, 122, 217, 0.4) !important;
                }

                .el-date-editor.el-input,
                .el-date-editor.el-input__inner {
                    width: 12.5vw !important;
                }

                .el-date-editor.el-input,
                .el-date-editor.el-input__inner {
                    width: 12.5vw !important;
                    height: 1.6667vw !important;
                    border-radius: 0 !important;
                }

                .el-input__inner {
                    height: 1.6667vw;
                    background: linear-gradient(180deg, rgba(43, 142, 243, 0) 0%, rgba(43, 142, 243, 0.2) 100%);
                    border: 1px solid rgba(29, 122, 217, 0.5);
                    box-sizing: border-box;
                    color: #fff;
                    border-radius: 0 !important;
                    width: 12.5vw !important;
                }

                .el-input__inner::placeholder {
                    color: rgba(255, 255, 255, .3);
                }

                .el-input__icon {
                    line-height: 1.6667vw;
                    color: rgba(255, 255, 255, .3);
                }

                .el-input--prefix .el-input__inner {
                    padding: 0 1.4583vw;
                }
            }
        }

        .btn-list {
            display: flex;
            margin-left: 6.2167vw;
            position: absolute;
            top: 50%;
            transform: translate(0,-50%);
            right: 0.8333vw;

            .btn {
                width: 3.9583vw;
                line-height: 1.6667vw;
                text-align: center;
                color: #fff;
                box-sizing: border-box;
                margin-left: 0.4167vw;
                background: linear-gradient(180deg, rgba(43, 142, 243, 0) 0%, rgba(43, 142, 243, 0.2) 100%);
                border: 1px solid rgba(43, 142, 243, 0.5);
                cursor: pointer;

                &:nth-child(2) {
                    background: linear-gradient(180deg, rgba(43, 142, 243, 0) 0%, rgba(43, 142, 243, 0.6) 100%);
                }
            }
        }
    }

    .list {
        margin: 0 auto 2.777vh;
        width: 81.6667vw;
        height: 62.9629vh;

        .liat-nav,
        .list-item {
            width: 81.6667vw;
            height: 3.7037vh;
            display: flex;
            align-items: center;
            background-color: rgba(43, 142, 243, .15);

            view {
                padding-left: 0.8333vw;
                overflow: hidden;
                text-overflow: ellipsis;
                text-wrap: nowrap;

                .tag {
                    display: inline-block;
                    margin: 0 auto;
                    padding: 0.1042vw 0.3125vw;
                    background-color: rgba(43, 197, 243, .1);
                    color: rgba(43, 197, 243, 1);
                    font-weight: bold;
                }
            }

            view:nth-child(1),
            view:nth-child(4),
            view:nth-child(5) {
                padding-left: 0;
                text-align: center;
            }

            view:nth-child(1) {
                width: 3.125vw;
            }

            view:nth-child(2),
            view:nth-child(3) {
                width: 12.5vw;
            }

            view:nth-child(4),
            view:nth-child(11) {
                width: 5.2083vw;
            }

            view:nth-child(5) {
                width: 4.1667vw;
            }

            view:nth-child(6) {
                width: 8.8542vw;
            }

            view:nth-child(7) {
                width: 9.375vw;
            }

            view:nth-child(8),
            view:nth-child(9) {
                width: 6.25vw;
            }

            view:nth-child(10) {
                width: 160px;
            }

            view:nth-child(11) {
                cursor: pointer;
            }

            .color-b {
                color: #2BC5F3;
            }

            .color-o {
                color: #FD8F21;
            }

            .color-r {
                color: #FD5421;
            }

            .color-w {
                color: #DDF7FF
            }

        }

        .list-item:nth-child(2n) {
            background-color: transparent;
        }

        .no-list {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .pages-box {
        position: relative !important;
        bottom: 0;
        right: 0;
        height: 1.5625vw;
        padding-right: 0.8333vw;
    }

    .box .item {
        margin: 0 0.2604vw;
        width: 1.5625vw;
        height: 1.5625vw;
        box-sizing: border-box;
    }

    .pagesSize>input {
        width: 2.9167vw;
        height: 1.5625vw;
        box-sizing: border-box;
    }
}